<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">

    <h4 id="demo0">No styling</h4><hr>

    <p>
        A basic setup requires us to provide some HTML markup and to invoke the jCarouselLite plugin. That's all !!!
    </p>

    <p>
        The plugin takes care of styling various carousel items to nicely line up horizontally or vertically.
        It sizes the carousel based on visible items (but you have to provide the dimensions of individual items).
        It does a few more things as well to handle compatibility between different browsers.
    </p><br>

    <button class="prev-no-style">&lsaquo;</button>
    <button class="next-no-style">&rsaquo;</button><br><br>
    <div class="carousel-no-style">
        <ul>
            <li><img src="image/1.jpg" style="width:130px; height:118px;"></li>
            <li><img src="image/2.jpg" style="width:130px; height:118px;"></li>
            <li><img src="image/3.jpg" style="width:130px; height:118px;"></li>
            <li><img src="image/4.jpg" style="width:130px; height:118px;"></li>
            <li><img src="image/5.jpg" style="width:130px; height:118px;"></li>
        </ul>
    </div>
    <br>

    <p>
        The only style information that you had to provide was the carousel item's width and height - in this case
        <code>&lt;img src=&quot;image/1.jpg&quot; style=&quot;width:130px; height:118px;&quot;&gt;</code>.
        That information is crucial to initialize the carousel. So, don't forget to provide that.
    </p>

    <p>
        The rest of the demos applies additional styling to make the carousel look pleasant. Check them out.
    </p>

</div>

<script type="text/javascript">
    $(function() {
        $(".carousel-no-style").jCarouselLite({
            btnNext: ".next-no-style",
            btnPrev: ".prev-no-style"
        });
    });
</script>

</body>
</html>